@import "variables";
.contact-from{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 12;
  background:color($h5,c9);
  //overflow-y: scroll;
  .match-filter-title{
    width:100%;
    position: relative;
    margin-bottom:pxTorem(20);
    background:color($h5,c10);
    .back {
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: pxTorem(30);
      margin: auto;
      @include icon(34, 34, '/assets/icon/screen_closed.png')
    }
    div{
      width:100%;
      height:pxTorem(90);
      display: flex;
      align-items: center;
      justify-content: center;
      @include font-dpr(34px);
      color:color($h5,c2);
    }
  }
  form{
    position: relative;
    .contact-detail{
      width:100%;
      margin-bottom:pxTorem(60);
      .input-clum{
        width:100%;
        background:color($h5,c10);
        padding:pxTorem(30) pxTorem(20);
        position: relative;
        display: flex;
        align-items: flex-start;
        span{
          display: inline-block;
          width:pxTorem(150);
          text-align: right;
          @include font-dpr(26px);
          color:color($h5,c3);
          box-sizing: content-box;
        }
        .input-info{
          padding-left:pxTorem(50);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          input{
            width:100%;
            padding:0;
            @include font-dpr(28px);
            margin-top:pxTorem(-2);
            -webkit-appearance: none;
          }
          p{
            padding:pxTorem(15) 0 0;
            color:color($h5,c11);
            @include font-dpr(24px);
          }
        }
      }
      .input-clum:after{
        content: '';
        display: block;
        width:100%;
        height:1px;
        position: absolute;
        bottom:0;
        left:0;
        border-top:1px solid color($h5,c9);
        transform: scaleY(0.5);
      }
      .input-clum:nth-last-of-type(1):after{
        display: none;
      }
      .contact-detail:after{
        display: inline-block;
        content: '';
        width:100%;
        position: absolute;
        left:0;
        bottom:0;
        height:1px;
        border-bottom:1px solid #e8e8e8;
        transform: scaleY(0.5);
      }
      .contact-detail:last-child:after{
        display: none;
      }
    }
    .contact-introduce{
      margin-bottom:pxTorem(150);
      p{
        padding-left:pxTorem(20);
        @include font-dpr(26px);
        color:color($h5,c3);
        margin-bottom:pxTorem(20);
      }
      .textarea{
        width:100%;
        resize: none;
        border: none;
        height:pxTorem(300);
        padding:pxTorem(30) pxTorem(20);
        @include font-dpr(30px);
        color:color($h5,c2);
      }
      .tips{
        position: relative;
        display: inline-block;
        width:100%;
        color:color($h5,c11);
        @include font-dpr(24px);
        padding-left:pxTorem(20);
        line-height: pxTorem(30);
        margin-bottom:pxTorem(20);
      }
      .textareaLocation{
        position: relative;
        background: color($h5,c10);
        padding-bottom:pxTorem(30);
        p{
          position: absolute;
          right:pxTorem(20);
          bottom:pxTorem(10);
          margin-bottom:0;
          span{
            @include font-dpr(22px);
            color:color($h5,c3);
          }
          .hasValue{
            color:color($h5,c1);
          }
        }
      }
    }
  }
  .contact-form-position{
     z-index: 8;
     width:100%;
     box-sizing: border-box;
     position: absolute;
     overflow: scroll;
     bottom:0;
     left:0;
     padding:pxTorem(20) pxTorem(30);
     border-top:1px solid color($h5,c9);
     background:color($h5,c10);
    div{
      width:100%;
      border-radius: pxTorem(4);
      box-sizing: border-box;
      height:pxTorem(90);
      line-height: pxTorem(90);
      @include font-dpr(30px);
      text-align: center;
      background:color($h5,c1);
      color:color($h5,c10);
      opacity: 0.7;
    }
     .contact-now{
       opacity: 1.0;
     }
  }
}
